<template>
    <el-dialog v-model="editDeptVisible" title="编辑部门" @close="handleClose" draggable>
        <el-form ref="formRef" :model="editDeptForm" label-width="auto">
            <el-form-item label="上级部门" prop="parentId">
                <el-tree-select v-model="editDeptForm.parentId" :data="treeData" check-strictly />
            </el-form-item>
            <el-form-item label="部门名称" prop="name">
                <el-input v-model="editDeptForm.name" clearable />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="editDeptForm.email" clearable />
            </el-form-item>
            <el-form-item label="联系电话" prop="telephone">
                <el-input v-model="editDeptForm.telephone" clearable />
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="editDeptForm.address" clearable />
            </el-form-item>
            <el-form-item label="logo地址" prop="logo">
                <el-input v-model="editDeptForm.logo" clearable />
                <div class="logo-preview" v-if="editDeptForm.logo">
                    <div class="logo-box">
                        <el-avatar :src="editDeptForm.logo" />
                    </div>
                </div>
            </el-form-item>

            <el-form-item label="显示顺序" prop="seqNo">
                <el-input v-model="editDeptForm.seqNo" clearable />
            </el-form-item>
            <el-form-item label="部门状态" prop="status">
                <el-radio-group v-model="editDeptForm.status">
                    <el-radio :value="1">启用</el-radio>
                    <el-radio :value="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="editDeptForm.remark" type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submitForm">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, inject } from 'vue'
import { editDept, getDeptTree } from '@/api/system/dept'
import { handleChildreNode, handleAttributes } from '@/utils/common'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const formRef = ref(null)

const treeData = ref([])
const { editDeptVisible, selectedRow } = inject('editDept')

const editDeptForm = reactive({
    id: undefined,
    parentId: undefined,
    name: undefined,
    email: undefined,
    telephone: undefined,
    address: undefined,
    logo: undefined,
    seqNo: undefined,
    status: undefined,
    remark: undefined
})

watch(
    () => selectedRow.value,
    (newValue) => {
        if (newValue) {
            Object.assign(editDeptForm, newValue)
            selectDeptTree()
        }
    },
    {
        // 立即以当前路由的值为触发条件
        immediate: true
    }
)
/**
 * 重置表单
 * @param formEl 表单的ref
 */
function resetForm(formEl) {
    if (!formEl) return
}
/**
 * 提交表单
 */
function submitForm() {
    editDeptVisible.value = false
    editDept(editDeptForm)
    resetForm(formRef)
    // 刷新表格
    const { query, path } = route
    router.replace({ path: '/redirect' + path, query: query })
}

/**
 * 获取部门树
 */
function selectDeptTree() {
    getDeptTree().then((response) => {
        if (response) {
            handleChildreNode(response.data)
            handleAttributes(response.data)
            treeData.value = response.data
        }
    })
}
// 重置 editDeptForm 的函数
const resetEditDeptForm = () => {
    Object.keys(editDeptForm).forEach((key) => {
        editDeptForm[key] = undefined
    })
}
// 处理对话框关闭事件
function handleClose() {
    resetForm(formRef)
    resetEditDeptForm()
    editDeptVisible.value = false
}
</script>

<style lang="scss" scoped>
.logo-preview {
    margin-top: 30px;
    width: 800px;
    @include border();
    @include flex-center;
    & .logo-box {
        width: 100%;
        height: 100%;
        @include grid-center;
    }
}
</style>
